<template>
  <div v-if="conData">
    <Title title="容器详情" class="title"></Title>
    <ul class="row">
      <li><span class="bt">ID</span><span class="content">{{conData.Id}}</span></li>
      <li>
        <span class="bt">名字</span>
        <span class="content">{{conData.Name}} <van-icon name="edit" @click="chengeNameShow = true" /></span>
        <van-dialog v-model="chengeNameShow" title="修改Name" @confirm="chengeName" show-cancel-button>
          <van-field v-model="newName" label="Name" placeholder="请输入用户名" />
        </van-dialog>
      </li>
      <li><span class="bt">IP地址</span><span class="content">{{conData.NetworkSettings.IPAddress}}</span></li>
      <li><span class="bt">状态</span><span class="content">{{conData.State.Status}}</span></li>
      <li><span class="bt">创建时间</span><span class="content">{{conData.Created}}</span></li>
      <li><span class="bt">启动时间</span><span class="content">{{conData.State.StartedAt}}</span></li>
      <li><span class="bt">镜像</span><span class="content">{{conData.Config.Image || conData.Image}}</span></li>
      <li><span class="bt">端口配置</span><span class="content" v-html="this.port(conData)"></span></li>
      <li><span class="bt">入口点</span><span class="content">{{ conData.Config.Entrypoint ? conData.Config.Entrypoint.join(' ') : 'Null' }}</span></li>
      <li><span class="bt">ENV</span><span class="content" v-html="itemEnv(conData.Config.Env)"></span></li>
    </ul>
  </div>
  <div v-else>
    <van-empty description="数据请求失败！" />
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog, Field } from 'vant'
import Title from '@/components/Title'

Vue.use(Dialog)
Vue.use(Field)
export default {
  data () {
    return {
      conData: null,
      chengeNameShow: false,
      newName: ''
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    // 修改名字
    chengeName () {
      const parse = {
        data: {
          docker: `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/containers/${this.conData.Id}/rename?name=${this.newName}"`
        }
      }
      this.$post(parse, res => {
        var data = JSON.parse(res)
        this.chengeNameShow = false
        if (data.message) {
          return this.$Notify({ type: 'danger', message: data.message })
        }
        if (data >= 200 && data < 300) {
          this.$Notify({ type: 'success', message: 'Name修改成功！' })
          this.fetchData()
        } else {
          this.$Notify({ type: 'danger', message: 'Name修改失败！' })
        }
      })
    },
    // 请求容器数据
    fetchData () {
      const parse = {
        data: {
          docker: `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/containers/${this.$router.history.current.params.id}/json"`
        }
      }
      this.$post(parse, res => {
        this.conData = JSON.parse(res)
        // console.log(this.conData)
        this.newName = this.conData.Name
      })
    },
    // 展示Env处理
    itemEnv (value) {
      if (value) {
        return value.join('，</br>')
      } else {
        return 'Null'
      }
    },
    // 展示端口处理
    port (value) {
      var str = ''
      for (var key in value.NetworkSettings.Ports) {
        if (value.NetworkSettings.Ports[key]) {
          str += value.NetworkSettings.Ports[key][0].HostIp + ':' + value.NetworkSettings.Ports[key][0].HostPort + ' - ' + key + '</br>'
        } else {
          str += key + '</br>'
        }
      }
      return str
    }
  },
  components: {
    Title
  }
}
</script>

<style lang="scss" scope>
.title{
  margin: vw(50) 0 vw(40) 0;
}
.row{
  margin: vw(10) 0;
  border: 1px solid #ddd;
  padding: vw(10);
  border-radius: vw(20);
  box-shadow: $yinying;
  li{
    font-size: vw(28);
    line-height: vw(45);
    display: flex;
    .bt{
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: vw(150);
      text-align: center;
      border: 1px solid $color;
      margin: vw(5) 0;
      border-radius: vw(5);
    }
    .content{
      padding: vw(15);
      flex: 1;
      word-break: break-all;
    }
    &:nth-child(2n-1){
      .bt{
        background: #F7FCFF;
      }
    }
    &:nth-child(2n){
      .content{
        background: #F7FCFF;
      }
    }
  }
}
</style>
